<template>
  <el-card style="padding: 20px;width: 600px;display: flex; margin: 0 auto;
justify-content: center;text-align: center">
    <div style="font-size: 18px">个人信息</div>
    <div style="margin: 0 auto;">
      <el-form
          style="width: 300px;margin-top: 20px"
          label-width="auto"
          :model="data.user"
          status-icon
          label-position="right"
      >
        <el-form-item label="头像" >
          <el-upload
              action="http://localhost:9999/files/upload"
              :headers="{token: data.user.token}"
              :on-success="handleFileSuccess"
              list-type="picture"
              v-model="data.user.avatar"
          >
            <el-button type="primary">上传头像</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="账号" >
          <el-input v-model="data.user.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户名" >
          <el-input v-model="data.user.name" />
        </el-form-item>
        <el-form-item label="电话" >
          <el-input v-model="data.user.phone" />
        </el-form-item>
        <el-form-item label="邮件" >
          <el-input v-model="data.user.email" />
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: center">
      <el-button type="primary" style="padding: 20px 50px" @click="update">修改</el-button>
    </div>
  </el-card>
</template>
<script setup>
import {reactive} from "vue";
import request from "@/utils/request.js";

const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || '{}'),
  form:{},
})

const handleFileSuccess = (res) => {
  data.user.avatar = res.data
}
const update = () =>{
  request.put('/admin/update', data.user).then(res => {
    if (res.code === '200') {
      ElMessage.success('更新成功')
      localStorage.setItem('code_user', JSON.stringify(data.user))

    } else {
      ElMessage.error(res.msg)
    }
  })
}

</script>
<style scoped>

</style>